<template>
  <div class="icon-selector">
    <el-popover placement="bottom-start" :width="350" trigger="click" v-model:visible="visible">
      <template #reference>
        <el-input :model-value="modelValue" placeholder="请选择图标" readonly>
          <template #prepend>
            <el-button v-if="modelValue" :icon="modelValue" />
            <el-button v-else>
              <el-icon><Search /></el-icon>
            </el-button>
          </template>
          <template #append>
            <el-button @click="clearIcon">
              <el-icon><Delete /></el-icon>
            </el-button>
          </template>
        </el-input>
      </template>

      <div class="icon-selector-popover">
        <div class="icon-selector-header">
          <el-input v-model="searchText" placeholder="搜索图标" clearable @input="handleSearch">
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </div>

        <div class="icon-selector-content">
          <div
            v-for="icon in filteredIcons"
            :key="icon"
            class="icon-item"
            :class="{ active: modelValue === icon }"
            @click="selectIcon(icon)"
          >
            <el-icon :size="20">
              <component :is="icon" />
            </el-icon>
            <span class="icon-name">{{ icon }}</span>
          </div>

          <div v-if="filteredIcons.length === 0" class="no-icons">未找到相关图标</div>
        </div>

        <div class="icon-selector-footer">
          <el-pagination
            small
            layout="prev, pager, next"
            :total="totalIcons"
            :page-size="pageSize"
            v-model:current-page="currentPage"
            @current-change="handlePageChange"
          />
        </div>
      </div>
    </el-popover>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed, onMounted } from 'vue'
  import { Search, Delete } from '@element-plus/icons-vue'
  import * as ElementPlusIconsVue from '@element-plus/icons-vue'

  // 定义props
  const props = defineProps({
    modelValue: {
      type: String,
      default: '',
    },
  })

  // 定义emits
  const emit = defineEmits(['update:modelValue'])

  // 响应式数据
  const visible = ref(false)
  const searchText = ref('')
  const currentPage = ref(1)
  const pageSize = ref(60)
  const allIcons = ref<string[]>([])

  // 计算属性
  const filteredIcons = computed(() => {
    let icons = allIcons.value

    // 根据搜索文本过滤
    if (searchText.value) {
      icons = icons.filter(icon => icon.toLowerCase().includes(searchText.value.toLowerCase()))
    }

    // 分页处理
    const start = (currentPage.value - 1) * pageSize.value
    const end = start + pageSize.value
    return icons.slice(start, end)
  })

  const totalIcons = computed(() => {
    if (searchText.value) {
      return allIcons.value.filter(icon =>
        icon.toLowerCase().includes(searchText.value.toLowerCase())
      ).length
    }
    return allIcons.value.length
  })

  // 方法
  const handleSearch = () => {
    currentPage.value = 1
  }

  const handlePageChange = (page: number) => {
    currentPage.value = page
  }

  const selectIcon = (icon: string) => {
    emit('update:modelValue', icon)
    visible.value = false
  }

  const clearIcon = () => {
    emit('update:modelValue', '')
  }

  // 初始化图标列表
  onMounted(() => {
    // 获取所有Element Plus图标名称
    allIcons.value = Object.keys(ElementPlusIconsVue).sort()
  })
</script>

<style scoped>
  .icon-selector-popover {
    max-height: 400px;
    display: flex;
    flex-direction: column;
  }

  .icon-selector-header {
    padding: 10px;
    border-bottom: 1px solid #ebeef5;
  }

  .icon-selector-content {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
  }

  .icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    height: 60px;
  }

  .icon-item:hover {
    background-color: #f5f7fa;
  }

  .icon-item.active {
    background-color: #ecf5ff;
    border: 1px solid #409eff;
  }

  .icon-name {
    font-size: 12px;
    margin-top: 4px;
    text-align: center;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .no-icons {
    grid-column: 1 / -1;
    text-align: center;
    padding: 20px;
    color: #909399;
  }

  .icon-selector-footer {
    padding: 10px;
    border-top: 1px solid #ebeef5;
    display: flex;
    justify-content: center;
  }
</style>
